Vue.component('yl-button', {
    template: `
    <span>
        <el-button :type="type" @click="Export" :loading="loading">
            <slot></slot>
        </el-button>
        <el-table id="ExportData" :data="data" style="display: none; width: 100%;margin-bottom: 20px;">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="Sales_Order_SerialNumber" label="订单编号"></el-table-column>
        <el-table-column align="center" prop="Sales_Amount" label="订单金额"></el-table-column>
        <el-table-column align="center" prop="Points_Amount" label="订单积分"></el-table-column>
        <el-table-column align="center" prop="Member_Name" label="用户姓名"></el-table-column>
        <el-table-column align="center" prop="Sales_Contacts" label="收件人"></el-table-column>
        <el-table-column align="center" prop="Sales_Phone" label="联系方式"></el-table-column>
        <el-table-column align="center" prop="Sales_Address" label="收货地址"></el-table-column>
        <el-table-column align="center" prop="Sales_Date" label="下单时间"></el-table-column>
        <el-table-column align="center" prop="Row_Status" label="订单状态">
            <template v-slot="{row}">
                {{row.Row_Status=='0'?'待付款':row.Row_Status=='1'?'已作废':row.Row_Status=='2'?'已付款':''}}
            </template>
        </el-table-column>
        </el-table>
    </span>`,
    props: ['loading', 'data', 'type'],
    methods: {
        Export() {
            this.$emit('click')
        }
    }
})
Vue.component('show-detail', {//修改记录组件
    template: `<el-dialog title="订单详情" :visible.sync="visibleDialog" width="80vw">
        <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="1">
                <div class="table_titel">
                    <div class="titel">订单信息</div>
                </div>
                <el-descriptions id="show" :column="2" border size="small">
                    <el-descriptions-item label="订单编号">
                        <el-input v-model="data.Sales_Order_SerialNumber" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="所属活动">
                        <el-input v-model="value" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单金额">
                        <el-input v-model="Amount" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="积分比例">
                        <el-input v-model="Deduction_Ratio" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        <el-input v-model="Row_Status" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-input v-model="data.Sales_Message" :disabled="true"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
                <div class="table_titel">
                    <div class="titel">下单人信息</div>
                </div>
                <el-descriptions id="show" :column="2" border size="small">
                    <el-descriptions-item label="下单账户">
                        <el-input v-model="data.Member_Name" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="下单时间">
                        <el-input v-model="data.Sales_Date" :disabled="true"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
                <div class="table_titel">
                    <div class="titel">收货人信息</div>
                </div>
                <el-descriptions id="show" :column="2" border size="small">
                    <el-descriptions-item label="姓名">
                        <el-input v-model="data.Sales_Contacts" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        <el-input v-model="data.Sales_Phone" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址">
                        <el-input v-model="Sales_Address" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="详情地址">
                        <el-input v-model="Sales_Address_Detail" :disabled="true"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="2">
                <el-table :data="tableData" stripe border height="50vh" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" prop="Supplier_Article_SerialNumber" label="供应商品编号"></el-table-column>
                    <el-table-column align="center" prop="Article_Name" label="商品名称"></el-table-column>
                    <el-table-column align="center" prop="Specifications_Name" label="规格名称"></el-table-column>
                    <el-table-column align="center" prop="Picture_URL" width="140" label="规格图片">
                        <template v-slot="{row}">
                            <el-image fit="contain" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Supplier_Name" label="供应商"></el-table-column>
                    <el-table-column align="center" prop="Sales_Unit_Price" label="商品单价"></el-table-column>
                    <el-table-column align="center" prop="Quantity" label="商品数量"></el-table-column>
                    <el-table-column align="center" prop="Amount" label="商品总价"></el-table-column>
                </el-table>
                <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
                    :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="发货信息" name="3">
                <el-table :data="tableData1" stripe border height="50vh" style="width: 100%">
                    <el-table-column align="center" type="expand" width="50">
                        <template slot-scope="{row}">
                        
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="发货单编号"></el-table-column>
                    <el-table-column align="center" prop="" label="供应商名称"></el-table-column>
                    <el-table-column align="center" prop="" label="发货状态"></el-table-column>
                </el-table>
                <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
                    :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="物流信息" name="4">
                <el-table :data="tableData2" stripe border height="50vh" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" prop="" label="所属发货单"></el-table-column>
                    <el-table-column align="center" prop="" label="物流公司"></el-table-column>
                    <el-table-column align="center" prop="" label="供应商"></el-table-column>
                    <el-table-column align="center" prop="" label="物流单号"></el-table-column>
                    <el-table-column align="center" prop="" label="寄件人联系方式"></el-table-column>
                    <el-table-column align="center" prop="" label="备注"></el-table-column>
                    <el-table-column align="center" prop="" label="操作"></el-table-column>
                </el-table>
                <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
                    :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:visible',false)">取消</el-button>
            <el-button type="primary" @click="submitForm('contract')">提交</el-button>
        </span>
    </el-dialog>`,
    props: ['data', 'visible'],
    data() {
        return {
            visibleDialog: false,
            tableData: [],//详情
            tableData1:[],//发货信息
            tableData2:[],//物流信息
            activeName: '1',
            form: {
                SQLSerialNumber: "P_business_sales_order_detail",
                PaginationNumber: 1,
                RowAmount: 10,
                ExtensionCondition: '',
                Condition: '',
                Sales_Order_SerialNumber:'',
            },
            total: 0,
            value: '',
        }
    },
    computed: {
        Amount() {
            return (this.data.Points_Amount + '积分') + (this.data.Points_Amount != 0 && this.data.Sales_Amount != 0 ? '+' : '') + (this.data.Sales_Amount + '元')
        },
        Deduction_Ratio(){
            return `1积分=${this.data.Deduction_Ratio}分`
        },
        Row_Status(){
            return this.data.Row_Status=='0'?'待付款':this.data.Row_Status=='1'?'已作废':this.data.Row_Status=='2'?'已付款':''
        },
        Sales_Address(){
            try {
                let strs = this.data.Sales_Address.split('/');
                return strs[0]+"-"+strs[1]+"-"+strs[2];
            } catch (error) {
                return ''
            }
        },
        Sales_Address_Detail(){
            try {
                return this.data.Sales_Address.split('/')[3]
            } catch (error) {
                return ''
            }
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
        'data.Sales_Order_SerialNumber':function (val){
            this.form.Sales_Order_SerialNumber = val;
            this.getList(this.form);
        }
    },
    methods: {
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        getList(form) {
            const that = this;
            let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent(data.Sales_Order_SerialNumber)))
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        }
    }
})
new Vue({
    el: '#app',
    data() {
        return {
            form: {
                SQLSerialNumber: "P_business_sales_order",
                PaginationNumber: 1,//页数
                RowAmount: 20,//每页数据条数
                Condition: '',
                ExtensionCondition: '',
                Activity_SerialNumber: '',
                Sales_Order_SerialNumber: '',
                Sales_Date: null,
            },
            Activity: [],
            total: 0,
            tableData: [],	//表格数据
            treeData: [],
            ExportData: [],//导出
            defaultProps: {
                children: 'Children',
                label: 'Brand_Name'
            },
            loading: false,
            dialogVisible: null,
            Sales_Order: {},//当前选中的订单
        }
    },
    mounted() {
        // this.getData();
        // this.getList(this.form);//前端分页
    },
    computed: {
        Type() {
            return function (str) {
                switch (str) {
                    case "Cash":
                        return "现金积分";
                    case "Activit":
                        return "活动积分";
                    case "Gift":
                        return "赠送积分";
                    case "Sales":
                        return "消费积分";
                    default:
                        return ""
                }
            }
        }
    },
    methods: {
        onSerach() {			//查询方法
            this.form.PaginationNumber = 1;
            this.getList(this.form)
        },
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        getData() {
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data: {
                    Data: 'business_activity',
                    Condition: "Row_Status <> '1'",
                },
                success: function (res) {
                    that.Activity = res;
                },
                error: function () {
                    that.$message.error("操作失败，请稍后再试")
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/salesOrder/getSalesOrderTree`,
                type: 'GET',
                success: function (data) {
                    console.log(data);
                    // data.forEach(item => {
                    //     item.TreeNode = item.Supplier_SerialNumber
                    //     item.Brand_Name = item.Supplier_Name
                    // });
                    // that.treeData = data;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        getList(form) {//换页方法
            const that = this
            let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent("%" + data.Sales_Order_SerialNumber + "%,%" + data.Sales_Order_SerialNumber + "%,%" + data.Sales_Order_SerialNumber + "%")))
            let sql = "";
            if (data.Sales_Date) {
                sql = sql + "AND business_sales_order.Sales_Date BETWEEN '" + data.Sales_Date[0] + "' AND '" + data.Sales_Date[1] + "'\r\n"
            }
            if (data.Activity_SerialNumber) {
                sql = sql + "AND business_member_points_log.Activity_SerialNumber = '" + data.Activity_SerialNumber + "'\r\n"
            }
            data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(sql)));
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    console.log(Result);
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Operate(command, row) {
            if (command == 'Show') {
                this.Sales_Order = row
                this.dialogVisible = true;
            }
        },
        handleNode(row, node) {
            if (node.length == 0) { //仅供应商
                this.form.Supplier_SerialNumber = row.Supplier_SerialNumber
            } else { //供应+商品牌
                this.form.Supplier_SerialNumber = row.Supplier_SerialNumber
                this.form.Brand_SerialNumber = row.Brand_SerialNumber
            }
            this.getList(this.form);
        },
        Export(form) {
            const that = this;
            this.loading = true;
           let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent("%" + data.Sales_Order_SerialNumber + "%,%" + data.Sales_Order_SerialNumber + "%,%" + data.Sales_Order_SerialNumber + "%")))
            let sql = "";
            if (data.Sales_Date) {
                sql = sql + "AND business_sales_order.Sales_Date BETWEEN '" + data.Sales_Date[0] + "' AND '" + data.Sales_Date[1] + "'\r\n"
            }
            if (data.Activity_SerialNumber) {
                sql = sql + "AND business_member_points_log.Activity_SerialNumber = '" + data.Activity_SerialNumber + "'\r\n"
            }
            data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(sql)));
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    if (Result.length > 0) {
                        that.ExportData = Result;
                        that.$nextTick(() => {
                            let wb = XLSX.utils.table_to_book(document.querySelector("#ExportData"));
                            var wbout = XLSX.write(wb, {
                                bookType: "xlsx",
                                bookSST: true,
                                type: "array"
                            });
                            try {
                                saveAs(
                                    new Blob([wbout], {
                                        type: "application/octet-stream"
                                    }),
                                    "销售订单表" + (+new Date()) + ".xlsx"
                                );
                            } catch (e) {
                                if (typeof console !== "undefined") console.log(e, wbout);
                            }
                            that.$message({
                                message: '已成功导出',
                                type: 'success'
                            })
                            return wbout;
                        })
                    }
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        }
    },
})